<template>
  <div class="page">
    <div class="title-box">
      <span class="title">员工转化明细</span>
      <span class="link-btn" @click="goBack">返回</span>
    </div>
    <div class="radio-title">日期筛选统计方式</div>
    <div style="margin-bottom: 10px">
      <span class="radio-box"><RJRadio @change="empRadioChange" class="radio-item" :model.sync='empRadio' :label="'1'"/>按照邀请日期统计</span>
      <span class="radio-box"><RJRadio @change="empRadioChange" class="radio-item" :model.sync='empRadio' :label="'2'"/>转化订单离店日期统计</span>
    </div>
    <DateSelect 
      ref="dateselect"
      :dateList="dateList" 
      class="date-box" 
      @selectDate="selectDate" 
      :defaultDate="defaultDate"
      :minDate="minDate"/>
    <div class="table" cellspacing="0" cellpadding="0">
        <div class="th">
          <div class="td">销售员工</div>
          <div class="td">销售账号</div>
          <div class="td">酒店编号</div>
          <div class="td">邀请下单日期&时间</div>
          <div class="td">客人姓名</div>
          <div class="td">手机号</div>
          <div class="td">订单编号</div>
          <div class="td">订单入住日期</div>
          <div class="td">离店日期</div>
          <div class="td">转化状态</div>
          <div class="td">失败原因</div>
          <div class="td">转化订单金额</div>
          <div class="td">提成金额</div>
        </div>
        <div class="tr" v-for="(item,index) in empTableData" :key="index">
          <div class="td">{{item.oprName}}</div>
          <div class="td">{{item.oprNo}}</div>
          <div class="td">{{item.hotelNo}}</div>
          <div class="td">{{item.orderDateTime}}</div>
          <div class="td">{{item.memberName}}</div>
          <div class="td">{{item.mobile}}</div>
          <div class="td">{{item.orderNo}}</div>
          <div class="td">{{item.checkInDate}}</div>
          <div class="td">{{item.checkOutDate}}</div>
          <div class="td">{{item.changeStatus==0?"等待入住":item.changeStatus==1?"成功":"失败"}}</div>
          <div class="td">{{item.failReason}}</div>
          <div class="td">{{item.changeAmt}}</div>
          <div class="td">{{item.rewardAmt}}</div>
        </div>
      </div>
  </div>
</template>

<script>
import DateSelect from '@/components/dateRange.vue'
import RJRadio from '@/components/RJRadio.vue'
import {formart} from '@/utils/dateUtils.js'
// import { getOprChangeDetailsAPI } from '@/api/common';
export default{
  data() {
    return {
      oprNo: "",
      minDate: '',
      defaultDate: [],
      date1: [],
      dateList: [
        {name: '自定义',value: null}
      ],
      empRadio: 1,
      empTableData: []
    }
  },
  components: {
    DateSelect,
    RJRadio
  },
  created() {
    this.oprNo = this.$route.query.oprNo
    let now = new Date()
    let year = now.getFullYear()
    this.minDate = year+"-01-01"
    let date = formart(new Date(now.setDate(now.getDate() - 1)));
    let month = now.getMonth()
    this.defaultDate = [this.$route.query.date1,this.$route.query.date2];
    this.date1 = [this.$route.query.date1,this.$route.query.date2];
    let texts = ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月',]
    let dateList = this.dateList
    dateList.push({name: "年至今", value: [year+"-01-01", date]})
    for(let i=0;i<=month;i++){
      let month = i*1+1
      month = month<10?"0"+month:month
      dateList.push({name: texts[i], value: [year+"-"+month+"-01", formart(this.getMonthEndDay(year+"-"+month))]})
    }
    this.getEmpTableData()
    this.$nextTick(()=> {
      this.$refs.dateselect.setDataType(Number(this.$route.query.dateType||0))
    })
  },
  methods: {
    goBack() {
      this.$router.back()
    },
    async getEmpTableData() {
      this.empTableData = []
      // let params = {
      //   oprNo: this.oprNo
      //   dateType: this.empRadio,
      //   startDate: this.date1[0],
      //   endDate: this.date1[1]
      // }
      // let res = await getOprChangeDetailsAPI(params)
      // if(res) {
      // res.data.forEach(item => {
      //   if(item.mobile) {
      //     item.mobile = item.mobile.substr(0,4)+"****"+item.mobile.substr(7,4)
      //   }
      // })
      //   this.empTableData = res.data
      // }
      this.empTableData = [{
                "orderDateTime": null,
                "oprName": "李丽丽",
                "oprNo": "1231231212342112412421312",
                "orderNo": "AAAAAAAAAAAAAAAAAAAAAAAAA",
                "changeAmt": 120.00,
                "mobile": "15717923236",
                "memberName": "B",
                "rewardAmt": 10.00,
                "checkInDate": null,
                "hotelNo": "001234",
                "checkOutDate": "2022-10-15",
                "changeStatus": "0",
                "failReason": null
            },
            {
                "orderDateTime": null,
                "oprName": "李丽丽",
                "oprNo": "12312312",
                "orderNo": "AAAAA",
                "changeAmt": 0,
                "mobile": null,
                "memberName": "C",
                "rewardAmt": 0,
                "checkInDate": null,
                "hotelNo": "001234",
                "checkOutDate": "2022-09-15",
                "changeStatus": "9",
                "failReason": "原因1"
            },
            {
                "orderDateTime": null,
                "oprName": "李丽丽",
                "oprNo": "12312312",
                "orderNo": "AAAAA",
                "changeAmt": 0,
                "mobile": null,
                "memberName": "A",
                "rewardAmt": 0,
                "checkInDate": null,
                "hotelNo": "001234",
                "checkOutDate": "2022-09-15",
                "changeStatus": "9",
                "failReason": "原因1"
            }]
              this.empTableData.forEach(item => {
          if(item.mobile) {
            item.mobile = item.mobile.substr(0,3)+"****"+item.mobile.substr(7,4)
          }
        })
    },
    empRadioChange(result) {
      this.empRadio = result
      this.getEmpTableData()
    },
    selectDate(date) {
      this.date1 = date
      this.getEmpTableData()
    },
    getMonthEndDay(month) {   //获取当月最后一天
      return new Date(month.substr(0, 4), month.substr(5, 2), 0);
    }
  }
}
</script>

<style lang="less" scoped>
.page{
  padding: 15px 18px;
  min-width: 375px;
  box-sizing: border-box;
  .title-box{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 11px;
    .title{
      font-size: 14px;
      font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
      font-weight: bold;
      color: #1B1F26;
      line-height: 19px;
    }
    .link-btn{
      font-size: 12px;
      font-family: MicrosoftYaHei;
      color: #0F9AF2;
      line-height: 16px;
    }
  }
  .table-title{
      font-size: 14px;
      font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
      font-weight: bold;
      color: #1B1F26;
      line-height: 19px;
      margin-bottom: 11px;
  }
  .radio-title{
    margin-left: 8px;
    font-size: 14px;
    font-family: MicrosoftYaHei;
    color: #1B1F26;
    line-height: 19px;
    margin-bottom: 6px;
  }
  .radio-box{
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    font-family: MicrosoftYaHei;
    color: #1B1F26;
    .radio-item{
      margin:0 4px 0 8px;
    }
  }
  .date-box{
    margin-bottom: 10px;
  }
  .table{
    width: 100%;
    margin-bottom: 10px;
    border:solid #E6E5E8; 
    border-width:1px;
    overflow-x: auto;
    .tr{
      width: fit-content;
      height: 40px;
      display: flex;
    }
    .td{
      width: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      color: #333333;
      text-align: center;
      border:solid #E8E8E8; 
      border-width: 0 1px 1px 0;
      box-sizing: border-box;
      padding: 0 3px;
      word-break: break-all;
      &:last-child{
        border-right: none;
      }
    }
    .th{
      background-color: #F0F4F5;
      height: max-content;
      width: fit-content;
      position: sticky;
      top: 0;
      display: flex;
      .td{
        width: 100px;
        font-size: 12px;
        font-family: MicrosoftYaHei;
        color: #666666;
        line-height: 16px;
      }
    }
  }
}
</style>